<template>
	<view>
		<tn-tabs
			:list="list" 
			:isScroll="true"
			:current="current"
			name="title"
			class="tabsbox tn-cool-bg-color-5"
			activeColor="#FFF"
			inactiveColor="#E6E6E6"
			@change="change"></tn-tabs>
			<view class="emptynode" v-if="blogList.length == 0">
				 <tn-empty mode="data"></tn-empty>
			</view>
			<view class="blog" v-if="blogList.length > 0">
				<view class="blog-top tn-main-gradient-teal--light">
					<view class="blog-top-left">
						<view class="">
							{{ tabItem.title }}
						</view>
						<text>
							共{{ total }}篇文章
						</text>
					</view>
					<view class="blog-top-right">
						<text class="tn-icon-share small-icon"></text>
						<text class="tn-icon-computer-fill big-icon"></text>
					</view>
				</view>
				<scroll-view 
					class="blog-scroll"
					scroll-y="true"  
					@scrolltolower="scrolltolower">
				  <view class="blog_item" v-for="option in blogList" :key="option.id" @click="openDetail(option)">
				  	<h1 class="kaiti">{{ option.title }}</h1>
				  	<view class="blog_item--box">
				  		<text class="blog_item--text">{{ option.preface }}</text>
				  		<img v-if="option.img && option.img != ''" :src="option.img" mode=""></img>
				  	</view>
				  	<view class="blog_item--author">
				  		<view class="">
				  			<text class="tn-icon-my-simple-fill tn-color-cyan" style="padding: 10rpx;"></text>
				  			<text>{{ option.author }}</text>
				  		</view>
				  		<text>{{ option.address }}</text>
				  		<text>{{ option.createTime }}</text>
				  	</view>
				  	<view class="blog_item--system">
				  	</view>
				  	<view class="blog_item--like">
				  		<view class="iconlike">
				  			<text class="tn-icon-message" style="padding: 10rpx;"></text>
				  			<text>{{ option.comment }}</text>
				  		</view>
				  		<view class="iconlike">
				  			<text class="tn-icon-praise" style="padding: 10rpx;"></text>
				  			<text>{{ option.like }}</text>
				  		</view>
				  		<view class="iconlike">
				  			<text class="tn-icon-eye" style="padding: 10rpx;"></text>
				  			<text>{{ option.view }}</text>
				  		</view>
				  	</view>
				  </view>
				</scroll-view>
			</view>
			<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				tabItem:{},
				pages:{
					pageNo:1,
					pageSize:10
				},
				blogList:[],
				total:''
			};
		},
		methods:{
			change(index){
				this.current = index;
				this.tabItem = this.list[index]
				this.getBlogList(this.tabItem)
			},
			//获取tab
			getTab(){
				this.$api.getTabList({id:3}).then(res => {
					if(res.code == 200){
						this.list = res.data
						this.tabItem = res.data[0]
						this.getBlogList(res.data[0])
					}
				})
			},
			//获取文章
			getBlogList(params){
				uni.showLoading({
					title: '加载中'
				});
				let obj = {
					secondClass:String(params.id),
					...this.pages
				}
				this.$api.getBlog(obj).then(res => {
					if(res.code == 200){
						this.blogList = res.data
						this.total = res.total
						this.pages.pageSize = res.pageSize
						uni.hideLoading();
					}
				})
			},
			//查看博客详情
			openDetail(item){
				uni.navigateTo({
					url:`/pages/detail/index?id=${item.id}`
				})
			},
			scrolltolower(){
				this.pages.pageSize += 10
				if(this.pages.pageSize > this.total){
					this.$refs.toast.show({
						title: '提示',
						content: '已加载全部',
						icon: 'success',
						image: '',
						duration: 3000
					})
					return false
				}
				this.getBlogList(this.tabItem)
			},
		},
		onLoad() {
			this.getTab()
		}
	}
</script>

<style lang="scss">
.tabsbox{
	// background-color: $tn-cool-bg-color-9;
}
.emptynode{
	height: calc(100vh - 80rpx);
	display: flex;
	justify-content: center;
	align-items: center;
}
.blog{
	padding: 20rpx 40rpx;
	&-top{
		width: 100%;
		height: 200rpx;
		border-radius: 10rpx;
		position: relative;
		margin-top: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20rpx;
		&-right{
			position: absolute;
			top: -40rpx;
			right: 20rpx;
			.big-icon{
				font-size: 200rpx;
			}
			.small-icon{
				font-size: 60rpx;
			}
		}
		&-left{ 
			margin-left: 40rpx;
			view{
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}
			text{
				font-size: 28rpx;
			}
		}
	}
	&-scroll{
		background-color: #fff;
		height: calc(100vh - 400rpx);
		background-color: #fff;
	}
	&_item{
		padding: 20rpx;
		box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		h1{
			font-size: 32rpx;
			margin-bottom: 10rpx;
			font-weight: 200;
		}
		&--box{
			display: flex;
			margin-bottom: 26rpx;
			img{
				width: 160rpx;
				height: 90rpx;
			}
		}
		&--text{
			font-size: 28rpx;
			color: #5F7E8B;
			line-height: 42rpx;
			display: -webkit-box; 
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		&--author{
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: #838383;
			margin-bottom: 20rpx;
		}
		&--system{
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #838383;
			margin-bottom: 20rpx;
			.iconsize{
				margin-right: 20rpx;
				font-size: 24rpx;
			}
		}
		&--like{
			display: flex;
			font-size: 28rpx;
			color: #838383;
			.iconlike{
				margin-right: 10rpx;
			}
		}
	}
}
</style>
